<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{
  path: string
}>()

const visible = ref(false)
const show = () => {
  visible.value = true
}
const hide = () => {
  visible.value = false
}
defineExpose({ show })
</script>

<template>
  <transition>
    <div class="view-img-wrap flex-v-cc" v-show="visible" @click="hide">
      <img class="image" :src="path" @click.stop />
    </div>
  </transition>
</template>

<style lang="scss" scoped>
.view-img-wrap {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(235, 241, 245);
  z-index: 999;
  .image {
    max-width: 80%;
    max-height: 90%;
  }
}
</style>
